<template>
  <div class="pageW">
    <el-page-header @back="goBack"></el-page-header>
    <el-form
      :model="form"
      :rules="formRules"
      ref="createRulesForm"
      label-width="120px"
      label-position="right"
    >
      <div class="titleCommand">
        <div class="l">
          <div class="title">编辑分润规则</div>
          <!-- <div>
            <div class="alert">
              <i class="el-icon-warning"></i>
              <span
                >编辑规则前请先确定本条规则适用的收款渠道以及各渠道可分润最高金额，防止超过最高分润金额引起分润失败</span
              >
            </div>
          </div> -->
        </div>
        <div class="r">
          <el-button class="width120" @click="goBack">取消</el-button>
          <el-button
            type="primary"
            class="width120"
            @click="submit('createRulesForm')"
            >提交</el-button
          >
        </div>
      </div>
      <el-card class="box">
        <div class="basic">
          <div class="top">
            <div class="title">基本信息</div>
          </div>
          <div class="bottom">
            <div class="item">
              <el-form-item
                label="模板名称"
                label-position="left"
                label-width="87px"
                prop="ruleName"
              >
                <el-input
                  v-model="form.ruleName"
                  style="width: 604px"
                  placeholder="请输入模板名称"
                  maxlength="30"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </div>
            <div class="item">
              <el-form-item
                label="模板ID"
                label-position="left"
                label-width="87px"
                class="is-required"
              >
                <el-input
                  disabled
                  v-model="form.id"
                  style="width: 604px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="item" style="margin-right: 300px">
              <el-form-item
                label="模板说明"
                label-position="left"
                label-width="87px"
              >
                <el-input
                  type="textarea"
                  v-model="form.ruleDesc"
                  placeholder="请输入模板说明"
                  style="width: 604px"
                ></el-input>
              </el-form-item>
            </div>
            <el-row>
              <!-- <el-col :span="7">
                <div class="item">
                  <el-form-item
                    label="分润时效"
                    label-position="left"
                    prop="payMode"
                    label-width="87px"
                  >
                    <el-radio-group v-model="form.payMode">
                      <el-radio label="real">实时分润</el-radio>
                      <el-radio label="delay">延时分润</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col> -->
              <el-col :span="7">
                <div class="item">
                  <el-form-item
                    label="分润模式"
                    label-position="left"
                    label-width="87px"
                    prop="separateType"
                  >
                    <el-radio-group v-model="form.separateType">
                      <el-radio :label="1">百分比</el-radio>
                      <el-radio :label="2">固定金额</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <el-card class="box">
        <div class="account">
          <div class="top">
            <div class="title">分润信息</div>
          </div>
          <div class="bottom">
            <el-row>
              <el-col :span="7">
                <el-form-item label="模板层级" prop="levelSum">
                  <el-select
                    style="width: 377px"
                    v-model="form.levelSum"
                    placeholder="请选择"
                    @change="(val) => checkChange(val)"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              :gutter="10"
              v-for="(item, i) of form.accountRulesInfoList"
              :key="i"
            >
              <el-col :span="4">
                <el-form-item :label="i == 0 ? '分润规则' : ''">
                  <div class="modellabel">
                    {{ i == 0 ? "平台分润" : `${i}级商户` }}
                  </div>
                  <!-- <el-merchant-vue
                v-model="item.memberId"
                :disabled="i === 0"
                :request-data="false"
                :placeholder="'请选择'"
                v-if="i === 0"
              ></el-merchant-vue> -->

                  <!-- <el-select
                v-else
                style="width: 100%"
                v-model="item.memberName"
                value-key="memberName"
                class="input_"
                filterable
                remote
                clearable
                placeholder="请输入商户名称或商户ID"
                :remote-method="remoteMethod"
                @change="setId(item, i)"
              >
                <el-option
                  v-for="item of restaurants"
                  :key="item.id"
                  :label="item.memberName"
                  :value="item"
                  class="height70"
                >
                  <div style="color: #999999">
                    {{ item.memberName }} 商户ID :{{ item.memberNo }}
                  </div>
                </el-option>
              </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :span="4" class="modelInput">
                <el-form-item
                  :prop="`accountRulesInfoList.${i}.fmtAmount`"
                  :rules="formRules.fmtAmount"
                >
                  <el-input
                    v-if="form.separateType === 1"
                    type="number"
                    v-model="item.fmtAmount"
                    placeholder="百分比"
                    :disabled="item.remainAmountBelong === 'Y'"
                  >
                    <template slot="append">%</template>
                  </el-input>
                  <el-input
                    v-else
                    type="number"
                    v-model="item.fmtAmount"
                    :placeholder="
                      item.remainAmountBelong === 'Y' ? '剩余金额' : '固定金额'
                    "
                    :disabled="item.remainAmountBelong === 'Y'"
                  >
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="7" :offset="1" v-if="form.separateType != 1">
            <el-form-item
              label="剩余资金归属"
              :prop="`accountRulesInfoList.${i}.remainAmountBelong`"
              :rules="formRules.remainAmountBelong"
            >
              <el-select
                v-model="item.remainAmountBelong"
                style="width: 100%"
                placeholder="请选择"
                @change="(val) => changeFlag(val, i, 'remainAmountBelong')"
              >
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
              <!-- <el-col :span="1" v-if="i > 1">
            <el-form-item label-width="0" style="padding-top: 4px">
              <i class="el-icon-remove-outline" @click="deleteChild(i)"></i>
            </el-form-item>
          </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="未分润资金归属" prop="fundBelong">
                  <el-radio-group v-model="form.fundBelong">
                    <el-radio :label="1">收款方</el-radio>
                    <el-radio :label="2">服务方</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <el-card>
        <div class="title">分润回退设置</div>
        <el-form-item>
          <el-radio-group
            v-model="form.refundSet"
            @change="separateTypeFn"
            class="modelBack"
          >
            <el-radio :label="1" style="width: 100%"
              >不退分润。订单发生退款时，不返还分润给收款方</el-radio
            >
            <el-radio :label="2" style="width: 100%"
              >全额退还分润。订单发生退款时，返还全部分润给收款方</el-radio
            >
            <el-radio :label="3" style="width: 100%"
              >按比例退分润。订单发生退款时，接分润比例退还相应分润给收款方</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-card>
      <!-- <el-card class="box">
        <div class="channel">
          <div class="top">
            <div class="title">未分帐资金归属</div>
          </div>
          <div class="bottom">
            <div class="item">
              <el-form-item
                class="footer"
                label=""
                label-position="left"
                label-width="156px"
                prop="residue"
              >
                <el-input v-model="text" disabled style="width: 29%"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-card> -->

      <!-- <el-card class="box">
          <div class="payment">
            <div class="top">
              <div class="title">退款返还设置</div>
            </div>
            <div class="bottom">
                <div class="item">
                <el-form-item
                class="footer1"
                  label=""
                  prop="refundSet"
                  label-position="left"
                  label-width="156px"
                >
                <el-radio-group v-model="form.refundSet">
      <el-radio :label="1" style="margin-bottom: 20px;">不退分润（对订单进行任何退款操作，均不返还分润给收款方）</el-radio>
      <br>
      <el-radio :label="2" style="margin-bottom: 20px;">全额退还分润（对订单进行任何退款操作，返还全部分润给收款方）</el-radio>
      <br>
      <el-radio :label="3">按比例退分润（按退款金额占订单总金额的比例，退还相应比例的分润给收款方）</el-radio>
    </el-radio-group>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-card> -->
    </el-form>
  </div>
</template>

<script>
import { isCnEnNum } from "@/utils/validate";
// import elMerchantVue from "@/components/el-merchant.vue";
import { mapMutations } from "vuex";

export default {
  name: "caseAccpontRulesEdit",
  components: {
    // elMerchantVue,
  },
  data() {
    const testAccName = (rule, value, callback) => {
      if (isCnEnNum(value)) {
        callback();
      } else {
        callback(new Error("请输入中/英文数字，不支持特殊字符"));
      }
    };
    return {
      options: [
        {
          value: 2,
          label: "2级",
        },
        {
          value: 3,
          label: "3级",
        },
        {
          value: 4,
          label: "4级",
        },
        {
          value: 5,
          label: "5级",
        },
        {
          value: 6,
          label: "6级",
        },
        {
          value: 7,
          label: "7级",
        },
      ],
      remainAmountBelongList: [],
      restaurants: [],
      text: "",
      form: {
        payMode: "real",
        ruleStatus: "",
        levelSum: 2, //模版层级
        separateType: 1,
        fundBelong: 1, //未分润资金归属
        refundSet: 1,  //分润回退设置
        ruleName: "",
        ruleDesc: "",
        accountRulesInfoList: [
          {
            levels: 0,
            memberName: "",
            // memberId: [],
            // feeFlag: "",
            fmtAmount: "",
            address: "",
          },
          {
            levels: 1,
            memberName: "",
            // memberId: "",
            // feeFlag: "",
            fmtAmount: "",
            address: "",
          },
        ],
      },
      formRules: {
        ruleName: [
          { required: true, message: "请输入分润模板名称", trigger: "change" },
          {
            validator: testAccName,
            trigger: "change",
          },
          { max: 30, message: "最大长度30字符", trigger: "change" },
          { min: 5, message: "最小长度5字符", trigger: "change" },
        ],
        // payMode: [
        //   { required: true, message: "请选择分润时效", trigger: "change" },
        // ],
        // separateType: [
        //   { required: true, message: "请选择分润模式", trigger: "change" },
        // ],
        ruleStatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        refundSet: [
          { required: true, message: "请选择退款返还设置", trigger: "change" },
        ],
        residue: [
          {
            required: true,
            message: "请选择未分润资金归属",
            trigger: "change",
          },
        ],
        // memberId: [
        //   { required: true, message: "请输入商户名称或商户id", trigger: "change" },
        // ],
        memberName: [
          {
            required: true,
            message: "请输入商户名称或商户id",
            trigger: "change",
          },
        ],
        fmtAmount: [
          // { required: true, message: "请输入分润数值", trigger: "change" },
          { validator: this.checkAmount, trigger: "change", required: true },
        ],
        // feeFlag: [
        //   {
        //     required: true,
        //     message: "请选择是否承担手续费",
        //     trigger: "change",
        //   },
        // ],
        // remainAmountBelong: [
        //   { required: true, message: "请选择剩余资金归属", trigger: "change" },
        // ]
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.getInfoList(id);
    }
  },
  watch: {
    "form.accountRulesInfoList"(val) {
      if (this.$route.name == this.$options.name) {
        this.remainAmountBelongList = [];
        val.forEach((e) => {
          if (e.memberId.length != "0") {
            this.remainAmountBelongList.push(e);
          }
        });
      }
    },
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.testCancel();
          // this.$router.push("/caseAccount/rules");
        }
      },
    },
    deep: true,
  },
  methods: {
    ...mapMutations(["changeLive"]),
    checkChange(val) {
      console.log(val);
      let arr = [];
      for (let i = 0; i < val; i++) {
        arr.push({
          levels: i,
          // memberId: "",
          // feeFlag: "",
          fmtAmount: "",
          // remainAmountBelong: "N",
        });
      }
      console.log(arr);
      this.form.accountRulesInfoList = arr;
      setTimeout(() => {
        this.$refs["createRulesForm"].clearValidate();
      }, 0);
    },
    changeFlag(val, i, prop) {
      if (val === "Y") {
        const arr = JSON.parse(JSON.stringify(this.form.accountRulesInfoList));
        this.form.accountRulesInfoList = arr.map((v, i_) => {
          let flag = "N";
          let fmtAmount = v.fmtAmount;
          if (i === i_) {
            flag = "Y";
            if (prop === "remainAmountBelong") fmtAmount = "";
          }
          return {
            ...v,
            fmtAmount: fmtAmount,
            [prop]: flag,
          };
        });
      }
    },
    deleteChild(i) {
      this.form.accountRulesInfoList.splice(i, 1);
      // this.form.residue=''
    },
    addChild() {
      if (this.form.accountRulesInfoList.length < 7) {
        this.form.accountRulesInfoList.push({
          memberId: [],
          // feeFlag: "",
          fmtAmount: "",
          remainAmountBelong: "N",
        });
      } else {
        this.$message.warning("最多添加7个分润方！");
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        //console.log(1);
        //console.log(query);
        this.getMerchantList(query);
      } else {
        //console.log(2);
        this.merchantList = [];
      }
    },
    getMerchantList(val) {
      this.$http
        .get(
          "/api/merchant/memberbase/getMemberBaseByAppIdAndMerchantIdAndMemberName?memberName=" +
            val
        )
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.restaurants = res.data;
          }
        });
    },
    checkAmount(rule, value, callback) {
      const type = this.form.separateType;
      const index = rule.field.split(".")[1];
      if (type === 1) {
        if (!/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)$/.test(+value)) {
          callback(new Error("请输入大于0小于100的数值，最多2位小数"));
        } else if (
          (+value > 0 && +value < 100) ||
          this.form.accountRulesInfoList[index].remainAmountBelong === "Y"
        ) {
          callback();
        } else {
          callback(new Error("请输入大于0小于100的数值，最多2位小数"));
        }
      } else {
        if (!/^([0-9]{1,6}$)|(^[0-9]{1,6}\.[0-9]{1,2}$)$/.test(+value)) {
          callback(new Error("请输入大于0且小于1000000的数值，最多2位小数"));
        } else if (
          (+value > 0 && +value < 1000000) ||
          this.form.accountRulesInfoList[index].remainAmountBelong === "Y"
        ) {
          callback();
        } else {
          callback(new Error("请输入大于0且小于1000000的数值，最多2位小数"));
        }
      }
    },
    setId(val, i) {
      // console.log(val);
      //console.log(i);
      // let obj = this.restaurants.find((item) => item.memberNo === val.memberNo);
      this.form.accountRulesInfoList[i].memberId = val.id;
      this.form.accountRulesInfoList[i].memberName = val.memberName;
      // console.log(this.form.accountRulesInfoList[i]);
    },
    setId1(val) {
      this.form.residue = val;
    },
    getInfoList(id) {
      this.$http
        .get(`/api/settle/rules/get`, {
          params: { id },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.form = res.data;
            this.form.accountRulesInfoList = this.form.accountRulesInfoList.map(
              (item) => ({
                ...item,
                // remainAmountBelong: item.remainAmountBelong ? "Y" : "N",
                // memberId: i === 0 ? [item.memberId] : item.memberId,
                // memberId:
                //   i === 0 ? [item.memberId] : this.setMemberId(item.memberId),
              })
            );
            // this.remainAmountBelongList= this.form.accountRulesInfoList;
            let residue1 = this.form.accountRulesInfoList.filter(
              (f) => f.remainAmountBelong == "Y"
            )[0].memberId;
            this.$set(this.form, "residue", residue1);
            this.text = this.form.accountRulesInfoList[0].memberName;
          }
        });
    },
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form);
          // const arr = this.form.accountRulesInfoList;
          // 必须选择一个商户承担手续费！
          // const hasFlag = arr.some((v) => v.feeFlag === "Y");
          // if (!hasFlag) {
          //   return this.$message.error("必须选择一个商户承担手续费！");
          // }

          // // 必须选择一个剩余资金归属商户！
          // const hasSurplus = arr.some(v => v.remainAmountBelong === 'Y')
          //   if (!hasSurplus) {
          //     return this.$message.error('必须选择一个剩余资金归属商户！')
          //   }
          // 百分比的时候加起来必须为100
          // if (this.form.separateType === 1) {
          //   const info = this.form.accountRulesInfoList.map(
          //     (v) => +v.fmtAmount
          //   );
          //   const str = info.reduce((pre, next) => pre + next);
          //   if (str >= 100) {
          //     return this.$message.error("百分比之和必须小于100");
          //   }
          // }
          //console.log(this.form.residue);
          this.$http
            .post("/api/settle/rules/update", {
              ...this.form,
              // accountRulesInfoList: this.form.accountRulesInfoList.map(
              //   (item, i) => ({
              //     ...item,
              //     memberId: i == 0 ? item.memberId.at(-1) : item.memberId,
              //     // memberId: item.memberId.at(-1),
              //     remainAmountBelong: i == 0 ? true : false,
              //     fmtAmount: +item.fmtAmount,
              //     infoSort: i + 1,
              //   })
              // ),
            })
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success("修改成功！");
                // this.$backToAlive('/caseAccount/rules');
                this.testCancel();
              }
            });
        }
      });
    },
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/caseAccount/rules");
    },
    goBack() {
      this.$backTo(`/caseAccount/rules/info?id=${this.$route.query.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
$-padding-left: 70px;
.mb20 {
  margin-bottom: 20px;
}
.mb40 {
  margin-bottom: 40px;
}

.width120 {
  width: 120px;
}
.width134 {
  width: 134px;
}
.modellabel {
  width: 110px;
  background: #f0f0f0;
  border-radius: 2px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
  padding-left: 10px;
}

.cardNumber {
  margin-top: 32px;
}
.card-wrapper {
  display: flex;
}
.store-type-tab {
  display: flex;
  .tab-item {
    padding: 6px 42px;
    background: #f0f0f0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4f595f;
    cursor: pointer;
    &:nth-of-type(1) {
      border-radius: 4px 0px 0px 4px;
    }
    &:nth-of-type(2) {
      border-radius: 0px 4px 5px 0px;
    }
    &.active {
      background: #03bfc6;
      color: #ffffff;
    }
  }
}

.titleCommand {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  margin-bottom: 16px;
  margin-top: 18px;
  .l {
    display: flex;
    margin-top: 13px;
    .title {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      line-height: 33px;
      margin-right: 20px;
    }
    .alert {
      width: 819px;
      // height: 42px;
      background: #fff9f9;
      border-radius: 6px;
      border: 1px solid #f7d8d8;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fc8f90;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      i {
        font-size: 18px;
      }
      span {
        display: inline-block;
        margin-left: 20px;
      }
    }
    // :deep(.el-alert){
    //   width: 819px;
    // }
  }
}

.box {
  margin-bottom: 10px;
}

.basic,
.account,
.payment {
  padding: 5px 20px 0px 20px;
  .top {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
      margin-right: 35px;
    }
  }
  .bottom {
    margin-top: 20px;
    // display: flex;
    // flex-wrap: wrap;
    // .item {
    //   width: 43.3%;
    // }
  }
}

.payment {
  .bottom {
    margin-top: -17px;
  }
}
.account {
  padding-left: 0;
  .top {
    .title {
      // margin-bottom: 15px;
      margin-left: 20px;
    }
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    .el-row {
      width: 100%;
    }
  }
}

.channel {
  padding: 5px 20px 0px 20px;
  .top {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
      margin-right: 35px;
    }
  }

  .bottom {
    margin-top: -48px;
    position: relative;
    top: 20px;
  }
}

.pageW {
  .wrap {
    background: #fff;
    margin-top: 20px;
    padding-bottom: 40px;
    .title {
      font-size: 24px;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
      color: #25b5d9;

      position: relative;
      &::before {
        content: "";
        width: 95px;
        height: 10px;
        background: #25b5d9;
        border-radius: 5px;
        position: absolute;
        top: 55px;
      }
    }
    .header {
      display: flex;
      justify-content: space-between;
      padding: 20px 40px 20px 70px;
      border-bottom: 1px solid #f0f0f0;
    }
    .secTitle {
      padding-left: 38px;
      font-weight: 600;
      color: #4f595f;
      font-size: 20px;
    }
    .el-form-item {
      padding-left: $-padding-left;
    }
    .cardNum {
      font-weight: 500;
      color: #1d1c1c;
      font-size: 14px;
      margin-right: 180px;
    }
    .typeText {
      display: inline-block;
      width: 162px;
      color: #1d1c1c;
      font-size: 14px;
      font-weight: 400;
    }
    .typeBox {
      padding-left: $-padding-left;
      span {
        display: inline-block;
        width: 110px;
        height: 48px;
        line-height: 48px;
        color: #869daa;
        background: #f4f8fb;
        text-align: center;
        border-radius: 4px 4px 0px 0px;
        cursor: pointer;
        &:nth-child(2) {
          margin: 0 2px;
        }
      }
      .active {
        color: #fff;
        background: #03bfc6;
      }
    }
    .fillParams {
      display: flex;
      justify-content: space-between;
      padding-left: $-padding-left;
      width: 700px;
      margin-top: 34px;
      .fillText {
        font-weight: 500;
        color: #4f595f;
        line-height: 25px;
      }
      .fillSecText {
        font-weight: 400;
        color: #869daa;
        font-size: 12px;
        margin-top: 12px;
        margin-bottom: 26px;
      }
    }
    .tooltipIcon {
      font-size: 16px;
      margin-right: 34px;
      color: #869daa;
    }
    ._posi {
      position: relative;
      top: -54px;
    }
    .change {
      width: 130px;
      position: relative;
      top: 70px;
      left: -130px;
    }
    .btnIcon {
      width: 120px;
    }
  }
  .pageTwo {
    display: flex;
    justify-content: space-between;
    .pageTwoLeft {
      width: 65%;
      .el-form-item {
        padding-left: 40px;
      }
    }

    .hintBox {
      flex: 1;
      padding-left: 53px;
      background: #f9f9f9;
      color: #bfbfbf;
      font-weight: 400;
      color: #bfbfbf;
      line-height: 24px;
      .s_title {
        color: #666;
        font-weight: 500;
        margin-bottom: 5px;
      }
    }
  }
}
:deep(.el-form-item__error) {
  width: max-content;
}
:deep(.el-input-group__append) {
  background: #25b5d9;
  color: #fff;
}
:deep(.footer) {
  .el-form-item__error {
    width: max-content;
    margin-left: 30%;
    margin-top: -26px;
  }
}
:deep(.footer1) {
  .el-form-item__error {
    width: max-content;
    margin-top: 10px;
  }
}
.modelInput {
  :deep(.el-form-item__content) {
    margin-left: 0px !important;
  }
}
.modelBack {
  :deep(.el-radio) {
    line-height: 24px !important;
  }
}
</style>
